<template>
  <div class="upload-container">
    <el-upload
      class="el-upload-box"
      action=""
      v-bind="$attrs"
      :show-file-list="showFileList"
      :before-upload="beforeAvatarUpload"
      :http-request="httpRequest"
      :on-success="handleAvatarSuccess"
      :file-list="fileList"
      :list-type="listType"
    >
      <template v-if="!showFileList" slot="default">
        <!-- 非列表形式展开时 -->
        <i v-if="fileList.length == 0" class="el-icon-plus" />
        <template v-if="fileList.length != 0">
          <!-- 图片 -->
          <img
            width="100%"
            height="100%"
            v-if="
              /^image/.test(
                getFileType(fileList[0].name || fileList[0].fileName)
              )
            "
            class="el-upload-list__item-thumbnail"
            :src="fileList[0].filePath || fileList[0].url"
          />
          <!-- 视频 -->
          <video
            width="100%"
            height="100%"
            v-if="
              /^video/.test(
                getFileType(fileList[0].name || fileList[0].fileName)
              )
            "
            class="el-upload-list__item-thumbnail"
            autoplay
            muted
            :src="fileList[0].filePath || fileList[0].url"
          />
        </template>
      </template>

      <!-- 列表 -->
      <i slot="default" v-if="showFileList" class="el-icon-plus" />
      <!-- 当文件以列表展开时 -->
      <template slot="file" slot-scope="{ file }">
        <!-- 图片 -->
        <img
          width="100%"
          height="100%"
          v-if="/^image/.test(getFileType(file.name || file.fileName))"
          class="el-upload-list__item-thumbnail"
          :src="file.url || file.filePath"
        />

        <!-- 视频 -->
        <video
          v-if="/^video/.test(getFileType(file.name || file.fileName))"
          class="el-upload-list__item-thumbnail"
          autoplay
          muted
          width="100%"
          height="100%"
          :src="file.url || file.filePath"
        />

        <span class="el-upload-list__item-actions">
          <!-- 查看 -->
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <!-- 删除 -->
          <span class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </template>
    </el-upload>

    <!-- 弹窗展示内容 -->
    <el-dialog
      :append-to-body="true"
      width="30%"
      :visible.sync="dialogInfo.visible"
    >
      <img
        width="100%"
        height="auto"
        v-if="dialogInfo.type == 'image'"
        :src="dialogInfo.url"
        alt=""
      />

      <video
        width="100%"
        height="auto"
        controls
        v-if="dialogInfo.type == 'video'"
        :src="dialogInfo.url"
      ></video>
    </el-dialog>
  </div>
</template>

<script>
import { getFileType } from "@/utils/index";
export default {
  name: "Upload",
  props: {
    //文件列表--------------------------------------------
    fileList: {
      type: Array,
      default() {
        return [];
      }
    },
    //文件类型--------------------------------------------
    typeName: {
      type: String,
      default: ""
    },
    //校验函数--------------------------------------------
    validatorFn: {},
    //类型--------------------------------------------
    listType: {
      type: String,
      default: "picture-card"
    },
    showFileList: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      //弹窗展示数据--------------------------------------------
      dialogInfo: {
        url: "",
        type: "",
        visible: false
      }
    };
  },
  computed: {
    fileNumber() {
      return this.fileList.length;
    }
  },
  methods: {
    //上传之前校验--------------------------------------------
    beforeAvatarUpload(file) {
      if (this.validatorFn) {
        return this.validatorFn(file);
      } else {
        return true;
      }
    },

    //自定义上传功能--------------------------------------------
    httpRequest(content) {
      content.onSuccess({ state: 100 });
    },

    //上传成功--------------------------------------------
    handleAvatarSuccess(res, file) {
      if (this.typeName) {
        file.typeName = this.typeName;
      }

      //列表--------------------------------------------
      if (this.showFileList) {
        this.fileList.push(file);
      } else if (!this.showFileList) {
        //非列表--------------------------------------------
        this.$set(this.fileList, 0, file);
      }
    },

    //删除按钮--------------------------------------------
    handleRemove(file) {
      const fileList = this.fileList;
      let removeFile = "";
      let fileIndex = "";
      for (let index = 0; index < fileList.length; index++) {
        const item = fileList[index];
        if (item.uid === file.uid) {
          fileIndex = index;
          break;
        }
      }
      if (fileIndex || fileIndex === 0) {
        removeFile = this.fileList.splice(fileIndex, 1);
      }
      this.$emit("removeFile", removeFile);
      return removeFile;
    },

    //查看按钮--------------------------------------------
    handlePictureCardPreview(file) {
      //检查类型类型--------------------------------------------
      const type = getFileType(file.name || file.fileName);
      this.$set(this.dialogInfo, "url", file.url || file.filePath);
      this.$set(this.dialogInfo, "type", type);

      //开启弹窗--------------------------------------------
      this.$set(this.dialogInfo, "visible", true);
    },

    //获取文件类型--------------------------------------------
    getFileType(name) {
      return getFileType(name);
    }
  }
};
</script>

<style lang="scss" scoped></style>
